<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="utf-8"/>
    <title>添加文章md</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/editormd/examples/css/style.css"
          th:href="@{/editormd/examples/css/style.css}"/>
    <link rel="stylesheet" href="../static/editormd/css/editormd.css" th:href="@{/editormd/css/editormd.css}"/>
    <link rel="stylesheet" href="../static/css/article_add.css" th:href="@{/css/article_add.css}"/>
    <link rel="stylesheet" type="text/css" href="../static/admin/sweetalert/sweetalert.css" th:href="@{/admin/sweetalert/sweetalert.css}"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="../static/admin/sweetalert/sweetalert.min.js" th:src="@{/admin/sweetalert/sweetalert.min.js}"></script>
    <link rel="shortcut icon" href="../static/img/logo.png" th:href="@{/img/logo.png}" type="image/x-icon"/>

</head>
<style>


</style>

<body>
<div class="mdlayout">
    <!--    1-->
    <div class="container-fluid mdheader">
        <div class="row">
            <div class="col-md-7 ">
                <div class="input-group line1part1">
                    <div>
                        <option class="form-control" id="userart" th:text="${user.getName()}"
                                th:value="${user.getId()}"> 甲甲子
                        </option>
                    </div>
                    <span class="input-group-addon">标题</span>
                    <input type="text" class="form-control" id="title" style="width: 300px" placeholder="标题 10个字符内"
                           maxlength="11" required>
                    <span class="input-group-addon">类型</span>
                    <select class="form-control" id="diseasetag" name="airline" onchange="select_diseasetag()">
                        <option th:each="diseasetag:${diseasetags}" value="1" th:value="${diseasetag.getId()}"
                                th:text="${diseasetag.getName()}">抑郁症
                        </option>
                    </select>
                </div>
            </div>
            <div class="col-md-3 col-md-offset-2">
                <div class="btn-group btn-group-justified" role="group" aria-label="...">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" id="publishbtn">发布</button>
                    </div>
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-default" id="savebtn">保存</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 2px">
            <div class="col-md-9">
                <div class="input-group line2part">
                    <input type="text" class="form-control" id="description" maxlength="50"
                           placeholder="封面介绍描述文字  45字符以内">
                </div>
            </div>
            <div class="col-md-2">
                <form id="uploadArtForm" name="art-img" enctype="multipart/form-data">
                    <input type="file" id="art-imgfile" name="art-imgfile" accept="image/*"/>
                </form>
            </div>
            <button type="button" class="btn btn-default" id="loadbtn" value="确认" onclick="uploadAvator()">
                确认
            </button>
        </div>
    </div>
</div>

<!--2-->
<div class="mdedit">
    <div id="bbseditormd">
            <textarea style="display:none;">
[TOC]
#### Disabled options

- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory


```html
&lt;!-- English --&gt;
&lt;script src="../dist/js/languages/en.js"&gt;&lt;/script&gt;

&lt;!-- 繁體中文 --&gt;
&lt;script src="../dist/js/languages/zh-tw.js"&gt;&lt;/script&gt;
```
        </textarea>
    </div>
</div>

<!--    3-->
<div class="mdfooter">
    sf sadffsdfsdf
</div>

</div>

<!--引入所需依赖-->
<script src="../static/editormd/examples/js/jquery.min.js" th:src="@{/editormd/examples/js/jquery.min.js}"></script>
<script src="../static/editormd/editormd.min.js" th:src="@{/editormd/editormd.min.js}"></script>
<script src="../static/js/article_add.js" th:src="@{/js/article_add.js}"></script>

<script type="text/javascript">
    // var testEditor;
    // $(function () {
    //     testEditor = editormd("bbseditormd", {
    //         width: "100%",
    //         height: "100%",
    //         syncScrolling: "single",
    //         path: "/editormd/lib/",
    //
    //         // theme: "dark",
    //         // previewTheme: "dark",
    //         // editorTheme: "pastel-on-dark",
    //         // markdown: md,
    //         codeFold: true,
    //         //syncScrolling : false,
    //         saveHTMLToTextarea: true,    // 保存 HTML 到 Textarea  这个配置，方便post提交表单
    //         searchReplace: true,
    //         //watch : false,                // 关闭实时预览
    //         htmlDecode: "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启
    //         // toolbar  : false,             //关闭工具栏
    //         //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
    //         emoji: true,
    //         taskList: true,
    //         tocm: true,         // Using [TOCM]
    //         tex: true,                   // 开启科学公式TeX语言支持，默认关闭
    //         flowChart: true,             // 开启流程图支持，默认关闭
    //         sequenceDiagram: true,       // 开启时序/序列图支持，默认关闭,
    //         //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
    //         //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
    //         //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
    //         //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
    //         //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
    //
    //         //启动本地图片上传功能
    //         imageUpload: true,
    //         watch: true,
    //         imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    //         imageUploadURL: "/uploadjpg",//后端的上传图片服务地址
    //         onload: function () {
    //             //console.log('onload', this);
    //             //this.fullscreen();
    //             //this.unwatch();
    //             //this.watch().fullscreen();
    //
    //             //this.setMarkdown("#PHP");
    //             //this.width("100%");
    //             //this.height(480);
    //             //this.resize("100%", 640);
    //         }
    //     });
    // });
    // $("#savebtn").click(function () {
    //     add_art(0);
    // })
    // $("#publishbtn").click(function () {
    //     add_art(1);
    // })
    //
    //
    // function add_art(r) {
    //     var userid = $("#userart").val();
    //     var diseasetagid = $("#diseasetag").val();
    //     var title = $("#title").val();
    //     var description = $("#description").val();
    //     var content = testEditor.getHTML();
    //     // alert(content)
    //     $.ajax({
    //         type: 'post',
    //         url: '/article/addart',
    //         contentType: "application/json",
    //         data: JSON.stringify({
    //             userid: userid,
    //             diseaseid: diseasetagid,
    //             titile: title,
    //             img:imgpath,
    //             description: description,
    //             content: content,
    //             visable: r
    //         }),
    //         success: function (rescode) {
    //             if (rescode == "200")
    //                window.location.href="/article/index"
    //         },
    //         error: function () {
    //
    //         }
    //     });
    //     imgpath=''
    // }

    // alert(testEditor.getMarkdown())
    // alert(testEditor.getHTML())
</script>
</body>
<script>
    // var imgpath=''
    // function uploadAvator() {
    //     $.ajax({
    //         type: 'post',
    //         url: '/upload/artavator',
    //         data: new FormData($('#uploadArtForm')[0]),
    //         processData: false,
    //         contentType: false,
    //         success: function (rescode) {
    //             if (rescode != '500') {
    //                 $("#loadbtn").css("background-color", "green").val("sdfsf").css("color","#ffffff");
    //                 imgpath=rescode;
    //             } else {
    //                 $("#loadbtn").css("background-color", "#e07474").css("color","#ffffff");
    //             }
    //         },
    //         error: function () {
    //             $("#loadbtn").css("background-color", "#e07474").css("color","#ffffff");
    //         }
    //     });
    // }

</script>
</html>
